@mixin transform($v) {
  
  transform: $v;
}

@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*4.25 datetimepicker日期插件
  name:      mod_datetimepicker
  sample:
*/
.datetimepicker {
  padding: 4px;
  margin-top: 1px;
  @include borderRadius(4px);
  direction: ltr;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  @include borderRadius(4px);
  @include boxShadow(0 6px 12px rgba(0, 0, 0, 0.175));
  background-clip: padding-box;
  &.datetimepicker-inline {
    width: 220px;
  }
  &.datetimepicker-rtl {
    direction: rtl;
    table tr td span {
        float: right;
    }
  }
  >div {
    display: none;
  }

  &.minutes div.datetimepicker-minutes {
    display: block;
  }

  &.hours div.datetimepicker-hours {
    display: block;
  }

  &.days div.datetimepicker-days {
    display: block;
  }

  &.months div.datetimepicker-months {
    display: block;
  }

  &.years div.datetimepicker-years {
    display: block;
  }
  .icon-arrow-left,
  .icon-arrow-right {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    *margin-right: .3em;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url(../images/datetimepicker/glyphicons-halflings.png);
    background-position: 14px 14px;
    background-repeat: no-repeat;
  }
  .icon-arrow-left {
    background-position: -240px -96px;
  }
  .icon-arrow-right {
    background-position: -264px -96px;
  }

  table {
    margin: 0;
    td,
    th {
      text-align: center;
      width: 20px;
      height: 20px;
      @include borderRadius(4px);
      border: none;
      &.switch {
        width: 145px;
      }
      span.glyphicon {
        pointer-events: none;
      }
    }
    td{
      .minute{
        &:hover {
          background: #eee;
          cursor: pointer;
        }
      }
      .hour{
        &:hover {
          background: #eee;
          cursor: pointer;
        }
      }
      .day{
        &:hover {
          background: #eee;
          cursor: pointer;
        }
      }
      &.old,
      &.mew{
        color: #999;
      }
      &.disabled,
      &.disabled:hover {
        background: none;
        color: #999;
        cursor: default;
      }
      &.today,
      &.today:hover,
      &.today.disabled,
      &.today.disabled:hover {
        background-color: #fde19a;
        background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
        background-repeat: repeat-x;
        border-color: #fdf59a #fdf59a #fbed50;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
      }
      &.today:hover,
      &.today:hover:hover,
      &.today.disabled:hover,
      &.today.disabled:hover:hover,
      &.today:active,
      &.today:hover:active,
      &.today.disabled:active,
      &.today.disabled:hover:active,
      &.today.active,
      &.today:hover.active,
      &.today.disabled.active,
      &.today.disabled:hover.active,
      &.today.disabled,
      &.today:hover.disabled,
      &.today.disabled.disabled,
      &.today.disabled:hover.disabled,
      &.today[disabled],
      &.today:hover[disabled],
      &.today.disabled[disabled],
      &.today.disabled:hover[disabled] {
        background-color: #fdf59a;
      }

      &.today:active,
      &.today:hover:active,
      &.today.disabled:active,
      &.today.disabled:hover:active,
      &.today.active,
      &.today:hover.active,
      &.today.disabled.active,
      &.today.disabled:hover.active {
        background-color: #fbf069;
      }

      &.active,
      &.active:hover,
      &.active.disabled,
      &.active.disabled:hover {
        background-color: #006dcc;
        background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
        background-repeat: repeat-x;
        border-color: #0044cc #0044cc #002a80;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }

      &.active:hover,
      &.active:hover:hover,
      &.active.disabled:hover,
      &.active.disabled:hover:hover,
      &.active:active,
      &.active:hover:active,
      &.active.disabled:active,
      &.active.disabled:hover:active,
      &.active.active,
      &.active:hover.active,
      &.active.disabled.active,
      &.active.disabled:hover.active,
      &.active.disabled,
      &.active:hover.disabled,
      &.active.disabled.disabled,
      &.active.disabled:hover.disabled,
      &.active[disabled],
      &.active:hover[disabled],
      &.active.disabled[disabled],
      &.active.disabled:hover[disabled] {
        background-color: #04c;
      }

      &.active:active,
      &.active:hover:active,
      &.active.disabled:active,
      &.active.disabled:hover:active,
      &.active.active,
      &.active:hover.active,
      &.active.disabled.active,
      &.active.disabled:hover.active {
        background-color: #039
      }
      span {
        display: block;
        width: 23%;
        height: 54px;
        line-height: 54px;
        float: left;
        margin: 1%;
        cursor: pointer;
        @include borderRadius(4px);
        &.disabled,
        &.disabled:hover {
          background: none;
          color: #999;
          cursor: default;
        }
        &:hover {
          background: #eee;
        }
        &.active,
        &.active:hover,
        &.active.disabled,
        &.active.disabled:hover {
          background-color: #006dcc;
          background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
          background-repeat: repeat-x;
          border-color: #0044cc #0044cc #002a80;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
        &.active:hover,
        &.active:hover:hover,
        &.active.disabled:hover,
        &.active.disabled:hover:hover,
        &.active:active,
        &.active:hover:active,
        &.active.disabled:active,
        &.active.disabled:hover:active,
        &.active.active,
        &.active:hover.active,
        &.active.disabled.active,
        &.active.disabled:hover.active,
        &.active.disabled,
        &.active:hover.disabled,
        &.active.disabled.disabled,
        &.active.disabled:hover.disabled,
        &.active[disabled],
        &.active:hover[disabled],
        &.active.disabled[disabled],
        &.active.disabled:hover[disabled] {
          background-color: #04c;
        }
        &.active:active,
        &.active:hover:active,
        &.active.disabled:active,
        &.active.disabled:hover:active,
        &.active.active,
        &.active:hover.active,
        &.active.disabled.active,
        &.active.disabled:hover.active {
          background-color: #039;
        }
        &.old {
          color: #999;
        }
      }
    }

    thead tr:first-child th,
    tfoot th {
      cursor: pointer;
    }
    thead tr:first-child th:hover,
    tfoot th:hover {
      background: #eee;
    }
  }
}

.datetimepicker-dropdown,
.datetimepicker-dropdown-left {
  top: 0;
  left: 0;
}

[class*=" datetimepicker-dropdown"]:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cccccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

[class*=" datetimepicker-dropdown"]:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
}

[class*=" datetimepicker-dropdown-top"]:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-bottom: 0;
}

[class*=" datetimepicker-dropdown-top"]:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  border-bottom: 0
}

.datetimepicker-dropdown-bottom-left:before {
  top: -7px;
  right: 6px;
}

.datetimepicker-dropdown-bottom-left:after {
  top: -6px;
  right: 7px;
}

.datetimepicker-dropdown-bottom-right:before {
  top: -7px;
  left: 6px;
}

.datetimepicker-dropdown-bottom-right:after {
  top: -6px;
  left: 7px;
}

.datetimepicker-dropdown-top-left:before {
  bottom: -7px;
  right: 6px;
}

.datetimepicker-dropdown-top-left:after {
  bottom: -6px;
  right: 7px;
}

.datetimepicker-dropdown-top-right:before {
  bottom: -7px;
  left: 6px;
}

.datetimepicker-dropdown-top-right:after {
  bottom: -6px;
  left: 7px;
}

.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
  background-color: transparent;
}
.datetimepicker .datetimepicker-hours span {
  height: 26px;
  line-height: 26px;
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
  width: 14.6%;
}

.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
  margin-bottom: inherit;
  line-height: 30px;
}
.datetimepicker .datetimepicker-minutes span {
  height: 26px;
  line-height: 26px;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date .input-group-addon span {
  cursor: pointer;
  width: 14px;
  height: 14px;
}
